<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Charged Particles in Electric Field</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        /**
         * Draws an arrow on the canvas context.
         * @param {CanvasRenderingContext2D} ctx - The canvas context.
         * @param {number} fromx - The starting x-coordinate.
         * @param {number} fromy - The starting y-coordinate.
         * @param {number} tox - The ending x-coordinate.
         * @param {number} toy - The ending y-coordinate.
         * @param {number} [headlen=10] - The length of the arrowhead lines.
         */
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        /**
         * Draws text with a subscript.
         * @param {CanvasRenderingContext2D} ctx - The canvas context.
         * @param {string} text - The main text.
         * @param {string} sub - The subscript text.
         * @param {number} x - The starting x-coordinate.
         * @param {number} y - The baseline y-coordinate for the main text.
         * @param {string} mainFont - The font for the main text.
         * @param {string} subFont - The font for the subscript text.
         */
        function drawTextWithSubscript(ctx, text, sub, x, y, mainFont, subFont) {
            ctx.font = mainFont;
            ctx.fillText(text, x, y);
            const textWidth = ctx.measureText(text).width;
            
            ctx.font = subFont;
            ctx.fillText(sub, x + textWidth - 3, y + 5);
        }

        // Set default styles
        ctx.strokeStyle = "black";
        ctx.fillStyle = "black";
        ctx.lineWidth = 1.5;
        ctx.textAlign = 'left';
        
        // --- Main Drawing ---

        const axisY = 200;
        const p1_x = 280;
        const p2_x = 230;

        // 1. Draw the x-axis
        drawArrow(ctx, 100, axisY, 550, axisY);
        ctx.font = "italic 22px 'Times New Roman'";
        ctx.fillText("x", 560, axisY + 8);

        // 2. Draw particles 1 and 2
        ctx.beginPath();
        ctx.arc(p1_x, axisY, 5, 0, 2 * Math.PI);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(p2_x, axisY, 5, 0, 2 * Math.PI);
        ctx.fill();

        // 3. Label particles 1 and 2
        ctx.font = "24px 'Times New Roman'";
        ctx.fillText("1", p1_x - 5, axisY - 12);
        ctx.fillText("2", p2_x - 5, axisY - 12);

        // 4. Draw Electric Field E
        drawArrow(ctx, 400, 100, 550, 100);
        ctx.font = "italic bold 22px 'Times New Roman'";
        ctx.fillText("E", 560, 105);

        // 5. Draw velocity vectors and labels
        const mainFont = "italic 22px 'Times New Roman'";
        const subFont = "italic 16px 'Times New Roman'";

        // v₂
        drawArrow(ctx, 160, 150, 210, 150);
        drawTextWithSubscript(ctx, "v", "2", 130, 155, mainFont, subFont);

        // v₁
        drawArrow(ctx, 250, 150, 350, 150);
        drawTextWithSubscript(ctx, "v", "1", 360, 155, mainFont, subFont);
        
        // Inequality v₂ < v₁
        const ineq_x = 220;
        const ineq_y = 120;
        drawTextWithSubscript(ctx, "v", "2", ineq_x, ineq_y, mainFont, subFont);
        ctx.font = "22px 'Times New Roman'";
        ctx.fillText("<", ineq_x + 25, ineq_y);
        drawTextWithSubscript(ctx, "v", "1", ineq_x + 45, ineq_y, mainFont, subFont);
        
        // 6. Draw mass and charge labels below particles
        const labelY = 250;
        ctx.textAlign = 'center';

        // m, q₂
        drawTextWithSubscript(ctx, "m, q", "2", p2_x - 15, labelY, mainFont, subFont);

        // m, q₁
        drawTextWithSubscript(ctx, "m, q", "1", p1_x - 15, labelY, mainFont, subFont);

        // 7. Draw charge inequalities at the bottom
        const ineqBottomY = 290;
        ctx.textAlign = 'left';
        let currentX = 140;

        // q₂ > 0,
        drawTextWithSubscript(ctx, "q", "2", currentX, ineqBottomY, mainFont, subFont);
        currentX += 20;
        ctx.font = "22px 'Times New Roman'";
        ctx.fillText("> 0, ", currentX, ineqBottomY);
        currentX += ctx.measureText("> 0, ").width;

        // q₁ > 0,
        drawTextWithSubscript(ctx, "q", "1", currentX, ineqBottomY, mainFont, subFont);
        currentX += 20;
        ctx.font = "22px 'Times New Roman'";
        ctx.fillText("> 0, ", currentX, ineqBottomY);
        currentX += ctx.measureText("> 0, ").width;

        // q₂ > q₁
        drawTextWithSubscript(ctx, "q", "2", currentX, ineqBottomY, mainFont, subFont);
        currentX += 20;
        ctx.font = "22px 'Times New Roman'";
        ctx.fillText(">", currentX, ineqBottomY);
        currentX += ctx.measureText("> ").width;
        drawTextWithSubscript(ctx, "q", "1", currentX, ineqBottomY, mainFont, subFont);

    </script>
</body>
</html>